<template>


  <el-space direction="vertical" style="margin: 12px;
  cursor: pointer;
"
            @click="rut">
    <el-skeleton
      style="width: 240px"
      :loading="loading"
      animated
      :throttle="500"
    >
      <template #template>
        <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
        <div style="padding: 14px">
          <el-skeleton-item variant="h3" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              margin-top: 16px;
              height: 16px;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </template>
      <template #default>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
          <div class="demo">
            <img :src="img" alt="" width="100%" height="100%" />
          </div>
          <div class="el_div">
            <el-text
              v-model="film"
              style="text-align: left; width: 100%;color: aliceblue"
            >{{ film }}
            </el-text>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value} 分"
            />
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </el-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps<{
  img: string
  value: number
  film: string
}>()

const loading = ref(false)
const value = ref(props.value)
const film = ref(props.film)

function rut() {
  window.open('/pn/?pa=' + encodeURIComponent(film.value), '_blank')
}
</script>
<style scoped>
.el_div {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.demo {
  width: 240px;
  height: 270px;
}

/deep/ .el-card.is-always-shadow {
  border: 0;
  border-radius: 15px;
}
</style>